<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>AJAX Content</title>
</head>
<body>
	<table id="user_dg" class="easyui-datagrid"
            data-options="toolbar:'#user_toolbar',rownumbers:true,singleSelect:true,pagination:true,border:0,fit:true,fitColumns:true,url:'../user',method:'get'">
        <thead>
            <tr>
                <th data-options="field:'id',hidden:true" width="0" ></th>
                <th data-options="field:'name'" width="50">Name</th>
                <th data-options="field:'age'" width="50">Age</th>
                <th data-options="field:'phone'" width="50">Phone</th>
                <th data-options="field:'email'" width="50">Email</th>
            </tr>
        </thead>
    </table>
    <div id="user_toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
        <input class="easyui-searchbox" data-options="prompt:'Please Input Value'" style="width:30%">
    </div>
    
    <div id="user_dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
            closed="true" buttons="#user_dlg-buttons">
        <div class="ftitle">User Information</div>
        <form id="user_fm"  method="post"  novalidate>
             <div class="fitem hidden">
                <input name="user.id" class="easyui-textbox" >
            </div>
            <div class="fitem">
                <label>Name:</label>
                <input name="user.name" class="easyui-textbox" required="true">
            </div>
            <div class="fitem">
                <label>Age:</label>
                <input name="user.age" class="easyui-textbox" required="true">
            </div>
            <div class="fitem">
                <label>Phone:</label>
                <input name="user.phone" class="easyui-textbox">
            </div>
            <div class="fitem">
                <label>Email:</label>
                <input name="user.email" class="easyui-textbox" validType="email">
            </div>
        </form>
    </div>
    <div id="user_dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#user_dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
    <script type="text/javascript">
        var url;
        function newUser(){
            $('#user_dlg').dialog('open').dialog('setTitle','New User');
            $('#user_fm').form('clear');
            url = '../user/save';
        }
        function editUser(){
        	console.log("edit") ;
            var row = $('#user_dg').datagrid('getSelected');
            console.log(row) ;
            if (row){
            	rr = {} ;
            	rr['user.id']=row.id ;
            	rr['user.name']=row.name ;
            	rr['user.age']=row.age ;
            	rr['user.phone']=row.phone ;
            	rr['user.email']=row.email ;
                $('#user_dlg').dialog('open').dialog('setTitle','Edit User');
                $('#user_fm').form('load',rr);
                url = '../user/update';
            }
        }
        function saveUser(){
            $('#user_fm').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.success){
                    	$('#user_dlg').dialog('close');        // close the dialog
                        $('#user_dg').datagrid('reload');    // reload the user data
                    } else {
                    	 $.messager.show({
                             title: 'Error',
                             msg: result.errorMsg
                         });
                    }
                }
            });
        }
        function destroyUser(){
            var row = $('#user_dg').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
                    if (r){
                        $.post('../user/delete',{id:row.id},function(result){
                            if (result.success){
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.message
                                });
                            }
                        },'json');
                    }
                });
            }
        }
    </script>
    <style type="text/css">
        #user_fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        .fitem input{
            width:160px;
        }
        .hidden {
           display:none;
        }
    </style>
</body>
</html>